@use "../variables" as *;

.svc-creator-popup {
  &.sv-popup--modal-popup {
    background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, #cceeee59));

    & > .sv-popup__container {
      background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, #ffffffff));
      border-radius: var(--ctr-popup-corner-radius, var(--sjs-corner-radius-x2));
      box-shadow:
        var(--ctr-popup-shadow-1-offset-x, 0px) var(--ctr-popup-shadow-1-offset-y, 2px)
          var(--ctr-popup-shadow-1-blur, 8px) var(--ctr-popup-shadow-1-spread, 0px)
          var(--ctr-popup-shadow-1-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-shadow-2-offset-x, 0px) var(--ctr-popup-shadow-2-offset-y, 16px)
          var(--ctr-popup-shadow-2-blur, 32px) var(--ctr-popup-shadow-2-spread, 0px)
          var(--ctr-popup-shadow-2-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-shadow-3-offset-x, 0px) var(--ctr-popup-shadow-3-offset-y, 32px)
          var(--ctr-popup-shadow-3-blur, 64px) var(--ctr-popup-shadow-3-spread, 0px)
          var(--ctr-popup-shadow-3-color, var(--sjs-special-glow, #004c441a));

      .sv-modal-footer-action-bar {
        gap: var(--ctr-popup-buttons-gap, var(--sjs-spacing-x2));
      }

      & > .sv-popup__body-content {
        background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, #ffffffff));
        border-radius: var(--ctr-popup-corner-radius, var(--sjs-corner-radius-x2));

        padding: var(--ctr-popup-padding-top, var(--sjs-spacing-x4))
          var(--ctr-popup-padding-right, var(--sjs-spacing-x4)) var(--ctr-popup-padding-bottom, var(--sjs-spacing-x4))
          var(--ctr-popup-padding-left, var(--sjs-spacing-x4));

        gap: var(--ctr-popup-gap, var(--sjs-spacing-x4));
        box-shadow: unset;
      }
    }

    // .sv-popup__scrolling-content {
    //   overflow: visible;
    // }
  }
  &.sv-popup--modal-overlay {
    background: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, #cceeee59));
    padding-top: var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2));
    max-height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
    box-sizing: content-box;

    & > .sv-popup__container {
      width: 100vw;
      max-height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
      height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));

      display: flex;
      border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2))
        var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
      background: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, #ffffffff));
      box-shadow:
        var(--ctr-popup-shadow-3-offset-x, 0px) var(--ctr-popup-shadow-3-offset-y, 32px)
          var(--ctr-popup-shadow-3-blur, 64px) var(--ctr-popup-shadow-3-spread, 0px)
          var(--ctr-popup-shadow-3-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-shadow-2-offset-x, 0px) var(--ctr-popup-shadow-2-offset-y, 16px)
          var(--ctr-popup-shadow-2-blur, 32px) var(--ctr-popup-shadow-2-spread, 0px)
          var(--ctr-popup-shadow-2-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-shadow-1-offset-x, 0px) var(--ctr-popup-shadow-1-offset-y, 2px)
          var(--ctr-popup-shadow-1-blur, 8px) var(--ctr-popup-shadow-1-spread, 0px)
          var(--ctr-popup-shadow-1-color, var(--sjs-special-glow, #004c441a));
    }

    & > .sv-popup__container > .sv-popup__body-content {
      display: flex;
      min-height: 100%;
      padding: var(--ctr-popup-padding-top-mobile, var(--sjs-spacing-x3))
        var(--ctr-popup-padding-right-mobile, var(--sjs-spacing-x3))
        var(--ctr-popup-padding-bottom-mobile, var(--sjs-spacing-x3))
        var(--ctr-popup-padding-left-mobile, var(--sjs-spacing-x3));
      border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2))
        var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
      box-sizing: border-box;
      flex-direction: column;
      gap: var(--ctr-popup-gap-mobile, var(--sjs-spacing-x3));
      flex: 1 0 0;
      align-self: stretch;
    }

    .sv-popup__scrolling-content {
      display: flex;
      flex-direction: column;
      flex: 1 0 0;
      align-self: stretch;
      overflow: visible;
    }

    .sv-popup__body-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--ctr-popup-buttons-gap, var(--sjs-spacing-x2));
      align-self: stretch;
    }

    .sv-modal-footer-action-bar {
      width: 100%;

      .sv-action {
        display: flex;
        align-items: center;
        flex: 1 0 0;
      }

      .sv-action__content {
        display: flex;
        flex-grow: 1;
      }
    }
  }

  .sv-popup__pointer {
    &:after {
      content: " ";
      border-bottom: calcSize(1) solid var(--ctr-popup-menu-pointer-color, var(--sjs-layer-1-background-500, #ffffffff));
    }
  }

  .sv-popup__body-header {
    @include ctrMediumBoldFont;
    color: var(--ctr-popup-title-color, var(--sjs-layer-1-foreground-100, #000000e6));
  }

  &.sv-popup--menu-popup {
    .sv-popup-inner > .sv-popup__container,
    & > .sv-popup__container {
      background: transparent;
      border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
      box-shadow:
        var(--ctr-popup-menu-shadow-1-offset-x, 0px) var(--ctr-popup-menu-shadow-1-offset-y, 2px)
          var(--ctr-popup-menu-shadow-1-blur, 8px) var(--ctr-popup-menu-shadow-1-spread, 0px)
          var(--ctr-popup-menu-shadow-1-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-menu-shadow-2-offset-x, 0px) var(--ctr-popup-menu-shadow-2-offset-y, 16px)
          var(--ctr-popup-menu-shadow-2-blur, 32px) var(--ctr-popup-menu-shadow-2-spread, 0px)
          var(--ctr-popup-menu-shadow-2-color, var(--sjs-special-glow, #004c441a));

      & > .sv-popup__body-content {
        border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
        background: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, #ffffffff));
        display: flex;
        padding: var(--ctr-popup-menu-padding-top, 0px) var(--ctr-popup-menu-padding-right, 0px)
          var(--ctr-popup-menu-padding-bottom, 0px) var(--ctr-popup-menu-padding-left, 0px);
        flex-direction: column;
        align-self: stretch;
      }
    }
  }

  &.sv-popup--menu-tablet {
    background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, #cceeee59));

    & > .sv-popup__container {
      border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
      box-shadow:
        var(--ctr-popup-menu-shadow-1-offset-x, 0px) var(--ctr-popup-menu-shadow-1-offset-y, 2px)
          var(--ctr-popup-menu-shadow-1-blur, 8px) var(--ctr-popup-menu-shadow-1-spread, 0px)
          var(--ctr-popup-menu-shadow-1-color, var(--sjs-special-glow, #004c441a)),
        var(--ctr-popup-menu-shadow-2-offset-x, 0px) var(--ctr-popup-menu-shadow-2-offset-y, 16px)
          var(--ctr-popup-menu-shadow-2-blur, 32px) var(--ctr-popup-menu-shadow-2-spread, 0px)
          var(--ctr-popup-menu-shadow-2-color, var(--sjs-special-glow, #004c441a));
    }
    & > .sv-popup__container > .sv-popup__body-content {
      background: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, #ffffffff));
    }
  }

  &.sv-popup--menu-phone {
    & > .sv-popup__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1 0 0;
      align-self: stretch;
    }
    & > .sv-popup__container > .sv-popup__body-content {
      display: flex;
      padding: var(--ctr-popup-menu-padding-top, 0px) var(--ctr-popup-menu-padding-right, 0px)
        var(--ctr-popup-menu-padding-bottom, 0px) var(--ctr-popup-menu-padding-left, 0px);
      flex-direction: column;
      flex: 1 0 0;
      align-self: stretch;
      background-color: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, #ffffffff));
    }
  }

  //styles for dropdown overlay
  &.sv-popup--menu-phone,
  &.sv-popup--menu-tablet {
    .sv-menu-popup__button {
      @include ctrDefaultBoldFont;
      color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-background-500, #19b394ff));
      border-radius: var(--ctr-actionbar-button-corner-radius, var(--sjs-corner-radius-x1));
      padding: var(--ctr-actionbar-button-padding-top-medium-text, var(--sjs-spacing-x05))
        var(--ctr-actionbar-button-padding-right-medium-text, var(--sjs-spacing-x2))
        var(--ctr-actionbar-button-padding-bottom-medium-text, var(--sjs-spacing-x05))
        var(--ctr-actionbar-button-padding-left-medium-text, var(--sjs-spacing-x2));
    }

    .sv-popup__body-footer {
      background-color: var(--ctr-popup-menu-footer-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
      border-top: 1px solid var(--ctr-popup-menu-footer-border-color, var(--sjs-border-25, #d4d4d4ff));
      padding: var(--ctr-popup-menu-footer-padding-top, var(--sjs-spacing-x05))
        var(--ctr-popup-menu-footer-padding-right, var(--sjs-spacing-x1))
        var(--ctr-popup-menu-footer-padding-bottom, var(--sjs-spacing-x05))
        var(--ctr-popup-menu-footer-padding-left, var(--sjs-spacing-x1));
    }

    .sv-menu-popup__button:disabled {
      color: var(--ctr-actionbar-button-text-color-disabled, var(--sjs-layer-1-foreground-100, #000000e6));
      opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
    }
  }

  &.sv-dropdown-popup.sv-popup--menu-phone,
  &.sv-dropdown-popup.sv-popup--menu-tablet {
    .sv-popup__body-footer {
      background-color: var(--ctr-contextual-menu-footer-background-color, var(--sjs-layer-3-background-500, var(--background-dim, #f3f3f3)));
    }
  }

  // .sv-popup__content {
  //   @include ctrDefaultFont;
  //   color: var(--ctr-popup-message-color, var(--sjs-layer-1-foreground-100, #000000e6));
  // }
}